<template>
  <view class="flex-row align-center" @click="handleClick">
    <view class="check-box flex-row flex-center" :class="{checked: modelValue,pain}" :style="{width: size, height: size}">
      <text class="technician-duihao color-white text-26" style="margin-top:1px;" :class="{'color-primary': pain && modelValue}" :style="{fontSize: valueSize}"/>
    </view>
    <slot>
      <text v-if="label" class="text-32 color-t1 margin-left-20" :style="{fontSize: labelSize}">{{ label }}</text>
    </slot>
  </view>
</template>

<script setup lang="ts">
interface IProps{
  modelValue: boolean
  label?: string
  labelSize?: string
  size?: string
  valueSize?: string
  pain: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  modelValue: false,
  pain: false
})

const $emit = defineEmits(['update:modelValue', 'click'])

function handleClick() {
  $emit('update:modelValue', !props.modelValue)
  $emit('click')
}
</script>

<style scoped lang="scss">
@include setMargin(top, 4);

@include setMargin(right, 2);

.check-box{
  width: 38rpx;
  height: 38rpx;
  border: 2rpx solid $color-border;
  border-radius: 50%;

  &.checked{
    border-color: $color-primary;
    background: $color-primary;

    &.pain{
      background: none;
    }

  }

}
</style>
